$info-color: #3AA6D0;
$success-color: #5eb670;
$warning-color: #FFC840;
$error-color: #FF2C00;
$disabled-color: #f0f0f0;
$disabled-color-inverse: #999;
$theme-color:#f9d70d;
$padding: 10px;
$margin: 10px;
$uni-border-radius: 5px;
$box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
$uni-input-height: 60rpx;
$uni-button-height: 70rpx;

/** ===========================  Layout  =============================*/
.c-box-shadow{
	box-shadow: 0 0 10rpx #88888844;
}
.c-box-shadow-light{
	box-shadow: 0 0 10rpx #cfcfcf44;
}
.c-flag::before{
	content: "* ";
	color: $uni-color-error;
}

.flex_1 {
	flex:1;
}
.row {
	display: flex;
	flex-direction: row;
	align-items: center;
	text-align: left;
	margin-bottom: $uni-spacing-col-base;
}

.row:last-child {
	margin-bottom: 0;
}

.item {
	display: flex;
	flex-direction: column;
	margin-right: $uni-spacing-row-base;
	
	.input {
		width: 100%;
		height: $uni-input-height;
		line-height: $uni-input-height;
		border-radius: $uni-border-radius;
		background: $uni-bg-color-grey;
		font-size: $uni-font-size-base;
		margin-top: $uni-spacing-col-sm;
		text-align: center;
		color: $uni-text-color;
	}
	.title {
		font-size: $uni-font-size-sm;
		font-weight: bold;
		color: $uni-text-color;
	}
	.input-placeholder {
		font-size: $uni-font-size-base;
		color: $uni-text-color-placeholder;
	}
	.text-area {
		margin-top: $uni-spacing-col-sm $uni-spacing-row-sm;
		padding: $uni-spacing-col-sm $uni-spacing-row-sm;
		width: calc(100% -  $uni-spacing-row-sm - $uni-spacing-row-sm);
		min-height: $uni-input-height;
		max-height: 220rpx;
		border-radius: $uni-border-radius;
		background:$uni-bg-color-grey;
		font-size: $uni-font-size-base;
	}
}

.item:last-child {
	margin-right: 0;
}

.section{
	padding: 30rpx;
}

.info-section {
	margin-bottom: 20rpx;

	.info-row {
		margin-bottom: 10rpx;
	}

	.info-row:last-child {
		margin-bottom: 0;
	}
}

.info-section:last-child {
	margin-bottom: 0;
}

.c-align-center{
	align-items: center;
}

.c-align-end{
	align-items: flex-end;
}
.c-align-start{
	align-items: flex-start;
}
.c-justify-center{
	justify-content: center;
}
.c-justify-between{
	justify-content: space-between;
}
.c-justify-around{
	justify-content: space-around;
}

.c-justify-end{
	justify-content: flex-end;
}
.c-justify-start{
	justify-content: flex-start;
}
/** ===========================  Input  =============================*/

.clear-input{
	background: transparent
}

/** ===========================  Button  =============================*/
.clear-button{
	/* 清除背景色 */
	background-color: transparent;
	/* 清除边框 */
	border: none;
	/* 清除内边距 */
	padding: 0;
	/* 清除外边距 */
	margin: 0;
	/* 清除行高 */
	line-height: normal;
	/* 清除圆角 */
	border-radius: 0;
	/* 设置文字颜色 */
	color: #000;
}
.clear-button::after{
	border: none;
}
.op-button {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	flex: 1;
	margin-right: $uni-spacing-row-base;
	height: $uni-button-height;
	line-height: $uni-button-height;
	text-align: center;
	font-size: $uni-font-size-sm;
	border-radius: $uni-border-radius;
	color: $uni-text-color-inverse;
	font-weight: bold;
}

.op-button:last-child {
	margin-right: 0;
}

.op-delete {
	background: $error-color;
	color: $uni-text-color-inverse;
}

.op-confirm {
	background: $warning-color;
	color:$uni-text-color-inverse;
}

.op-success {
	background: $success-color;
	color: $uni-text-color-inverse;
}

.op-normal {
	background: $info-color;
	color: $uni-text-color-inverse;
}

.op-disabled {
	background: $disabled-color;
	color: $disabled-color-inverse;
}

.slide-button-box{
	position: fixed;
	bottom: 0;
	right: 20rpx;
	z-index: 10;
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	
	.slide-button{
		width: 120rpx;
		height: 120rpx;
		margin-bottom: 40rpx;
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 22rpx;
		color: #fff;
		background: $uni-bg-color-grey;
	}
	
	.slide-button:first-child{
		margin-bottom: 120rpx;
	}
}

/** ===========================  Pop  =============================*/
.pop-center {
	.pop-body {
		width: 300px;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: $uni-spacing-col-base $uni-spacing-row-base;
		margin: auto;
		background: $uni-bg-color;
		border-radius: $uni-border-radius-lg;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}
	
	.pop-title {
		padding: $uni-spacing-col-base;
		width: 100%;
		font-size: $uni-font-size-lg;
		font-weight: bold;
		color: $uni-text-color;
		margin-bottom: $uni-spacing-col-lg;
		text-align: center;
	}
	
	.pop-content {
		width: 100%;
		background: $uni-bg-color;
		display: flex;
		flex-direction: column;
	}
}

.pop-bottom{
	background: $uni-bg-color;
	
	.pop-body {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: $uni-spacing-col-base $uni-spacing-row-base;
		margin: auto;
		background: $uni-bg-color;
		border-radius: $uni-border-radius-lg $uni-border-radius-lg  0 0;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}
	
	.pop-title {
		font-size: $uni-font-size-base;
		font-weight: bold;
		color: $uni-text-color;
		margin-bottom: $uni-spacing-col-lg;
		text-align: center;
	}
	
	.pop-content {
		width: 100%;
		background: $uni-bg-color;
		display: flex;
		flex-direction: column;
	}
}
